<template>
  <div class="order">
    保留胡创的
    <!-- 顶部搜索框 -->
    <div class="">
      <div class="header-top">
        <router-link to="" slot="left">
          <!-- 返回上一级 -->
          <!-- <mt-button icon="back" @click.native="$router.back(-1)"></mt-button> -->
        </router-link>
        <!-- 搜索框 -->
        <div class="search">
          <input
            type="text"
            name=""
            id=""
            class="s-input"
            placeholder="搜索我的订单"
          />
        </div>
        <!-- <mt-button icon="more" slot="right"></mt-button> -->
      </div>
    </div>

    <!-- 切换项 -->
    <mt-navbar v-model="orderSelected" fixed style="top: 40px">
      <mt-tab-item id="1">当前订单</mt-tab-item>
      <mt-tab-item id="2">历史订单</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="orderSelected" class="order-tab">
      <mt-tab-container-item id="1">
        <mt-cell v-for="(n, i) in 20" :title="'当前订单内容 ' + n" :key="i" />
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <mt-cell v-for="(n, i) in 6" :title="'历史订单 ' + n" :key="i" />
      </mt-tab-container-item>
    </mt-tab-container>

    <!-- 底部导航栏 -->
    <mt-tabbar v-model="selected" fixed>
        <mt-tab-item id="home">
          <img slot="icon" src="/imgs/shouye.svg" v-if="selected=='home'"/>
          <img slot="icon" src="/imgs/shouye1.svg" v-else/>
          <span :class="selected=='home'?'select':'noselect'">首页</span>
        </mt-tab-item>
        <mt-tab-item id="productList">
          <img slot="icon" src="/imgs/diandan.svg" v-if="selected=='productList'"/>
          <img slot="icon" src="/imgs/diandan2.svg" v-else/>
          <span :class="selected=='productList'?'select':'noselect'">点单</span>
        </mt-tab-item>
        <mt-tab-item id="order">
          <img slot="icon" src="/imgs/dingdan.svg" v-if="selected=='order'"/>
          <img slot="icon" src="/imgs/dingdan1.svg" v-else/>
          <span :class="selected=='order'?'select':'noselect'">订单</span>
        </mt-tab-item>
        <mt-tab-item id="my">
          <img slot="icon" src="/imgs/wode.svg" v-if="selected=='my'"/>
          <img slot="icon" src="/imgs/wode1.svg" v-else/>
          <span :class="selected=='my'?'select':'noselect'">我的</span>
        </mt-tab-item>
      </mt-tabbar> 
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      selected: "order",
      orderSelected: "1"
    };
  },
  watch: {
    //监听 selected 值，当 selected 变化时，跳转到相应的界面
    selected(newval) {
      if (newval == "home") {
        this.$router.push("/");
      } else if (newval == "productList") {
        this.$router.push("/productList");
      } else if (newval == "my") {
        this.$router.push("/my");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.header-top {
  background-color: #f6f8fa;
  .search {
    height: 31px;
    margin-top: 5px;
    border-radius: 20px;
    width: 260px;
    border: 1px solid #409eff;
    background-color: white;
    .s-input {
      border: 0;
      outline: none;
      position: relative;
      top: 2px;
      left: 10%;
    }
  }
}

// 中间内容布局
.order-tab {
  position: fixed;
  overflow-y: scroll;
  top: 86px;
  bottom: 55px;
  left: 0;
  right: 0;
}
/* 底部导航 */
.select {
  color: black;
  font-size: 12px;
}
.noselect {
  color: #aaaaaa;
  font-size: 12px;
}
</style>